<html>
	<head>
		<title>Sword - Magic - Kungfu</title>
		<style>
			body{
				background-color: #476C6C;
			}
			#game .panel{
				position:absolute;
				width: 400px;
				height: 400px;
				display: none;				
			}
			#game div.shown{
				display: block;
				
			}
			#game #loading {
				text-decoration:blink;
			}
			.menubtn{
				position: absolute;
				left: -400px;
				
			}
			.playerimg{
				height: 128px;
				width: 128px;
			}
			#playerleft, #playerright{
				float: left;
				width: 190px;
				
			}
			#leftplayerstats, #rightplayerstats {
				float: left;
				width: 170px;
				*width: 200px;
				padding-left: 30px;
				background-color: black;
				color: white;
				margin-top: 20px;
				padding-top: 10px;
				padding-bottom: 10px;
				xborder: 1px solid red;
			}
			
			#playerleft #playerleftimg, #playerright #playerrightimg{
				margin-left: 30px;
				margin-top: 15px;
				
			}
			
			#cptitle{
				width: 400px;
				background-color: black;
				color: white;
				font-size: 1.3em;
				padding-top: 3px;
			}
			
			#gamestatus{
        		height: 100px;
        		width: 400px;
        		background-color: gray;
        		clear: both;
        		padding-top: 10px;
      		}
      		#gsdata{
        		color: white;
        		font-size: 1.1em;
        		text-align: center;
      		}
      		
      		#charpreviewimg,#playerleftimg,#playerrightimg{
				width:128px;
				height:128px;
				overflow: hidden;
				position: relative;
				margin: 0px;
				padding: 0px;
				margin-left: auto;
				margin-right: auto;
			}
			#charpreviewimgsrc,#playerleftimgsrc,#playerrightimgsrc{
      			position: absolute;
      			top: 0px;
      			left: -128px;
    		}
    		
    		
    		.menubtn a, .menubtn a:hover, #chooseplayer a, #chooseplayer a:hover{
				color: white;
				text-decoration: none;
				font-weight: bold;
				font-size: 1.1em;
			}
			.menubtn a:hover, #chooseplayer a:hover{
				font-size: 1.5em;
				padding: 5px;
				margin: 0px;
			}
    				</style>
		
		<script type="text/javascript" src='../libs/yahoo.js'></script>
		<script type="text/javascript" src='../libs/animation.js'></script>
		<script type="text/javascript" src='../libs/dom.js'></script>
		<script type="text/javascript" src='../libs/event.js'></script>
		<script type="text/javascript" src='../libs/dragdrop.js'></script>
		<script type="text/javascript" src='../libs/json.js'></script>
		<script type="text/javascript" src='../libs/yui-ext.js'></script>
		
		<script>
			/** sword - magic - kungfu **/
			YAHOO.namespace('alw.smkf');
			YAHOO.namespace('alw.localplayer');
			YAHOO.namespace('alw.remoteplayer');
			var ydom = YAHOO.util.Dom;
			var yevt = YAHOO.util.Event;
			var yhost = window.external;

			var playerObj = function(){};
			playerObj.prototype={
				score: 0,
				points: {sword: 0, magic: 0, kungfu: 0},
				wildcards:0,
				health: 100,
				currAttack: 'sword',
				charIdx: 0
			}
			YAHOO.alw.localplayer =new playerObj();
			YAHOO.alw.remoteplayer=new playerObj();
			
			YAHOO.alw.smkf = {
				globals: {
					isInviter: false,
					gameState: 'init',
					tick: 0
					},
				init: function(){
					/** **/
					console.log('init')
					if(yhost){
				  		//yhost.LocalReady ();
              			if(yhost.Inviter){
				  			this.isInviter = true;
				  		}else{
				  			this.isInviter = false;
				  		}
					}
					/** **/
					this.globals.gameState='started';
					window.setInterval('YAHOO.alw.smkf.gamePulse()',3000);
					//this.choosePanel(null,'splash')
					
				},
				choosePanel: function(){
					var pnl = arguments[1];
					//hide all panels
					ydom.removeClass(ydom.getElementsByClassName('panel','div','game'), 'shown');
					//show selected panel
					ydom.addClass(pnl,'shown');
					YAHOO.alw.smkf.initPanel(pnl)
					
				},
				choosePlayer: function(){
					YAHOO.alw.smkf.choosePanel(null,'arena');
					YAHOO.alw.smkf.globals.gameState = 'starting arena';
				},
				initPanel: function(pnl){
					//console.log('init Panel' + pnl);
					switch(pnl){
						case 'splash':
							//console.log('splash panel init');
							var btnStart = new YAHOO.ext.Actor('btnstart');
							var btnHowTo = new YAHOO.ext.Actor('btnhowto');
							var btnCredits = new YAHOO.ext.Actor('btncredits');
							var splashAnim = new YAHOO.ext.Animator(btnStart, btnHowTo, btnCredits);
							splashAnim.startCapture();
								//btnStart.moveIn('left');
								//btnHowTo.moveIn('left');
								//btnCredits.moveIn('left');
								//btnStart.move('right',300, true, .4, null, YAHOO.util.Easing.easeOut);
								
								btnStart.moveTo(30,200,true,1,null, YAHOO.util.Easing.easeOut);
								btnHowTo.moveTo(30,230,true,1,null, YAHOO.util.Easing.easeOut);
								btnCredits.moveTo(30,260,true,1,null, YAHOO.util.Easing.easeOut);
							splashAnim.play();
								
							break;
						case 'arena': 
							console.log('arena inited');
							var i = YAHOO.alw.remoteplayer.charIdx;
							ydom.get('playerrightimgsrc').style.left=-i+'px';
							break; 	
						default:
							//console.log('default triggered!');	
							
						
					}
					
				},
				changePlayer:function(){
					var currIdx = YAHOO.alw.localplayer.charIdx;
					
				  	switch(arguments[1]){
						case "fwd": 
							currIdx+=256;
							if(currIdx>(39*256)){
								currIdx = 0;
							}
						  	break;
					 	case "back": 
							currIdx-=256
							if(currIdx <0){
								currIdx = 39*256
							}
						  	break;
				  	}
				  	YAHOO.alw.localplayer.charIdx = currIdx;
				  	//var imgString = YAHOO.alw.smkf.imgPath+YAHOO.alw.localplayer.charName+"_left.gif";
				  	//alert(currIdx)
				  	console.log(currIdx);
				  	ydom.get('charpreviewimgsrc').style.left=-(currIdx + 128)+'px';
				  	ydom.get('playerleftimgsrc').style.left=-(currIdx +128) +'px';
				},
				gamePulse: function(){
					var gObj = YAHOO.alw.smkf;
					var gameState = gObj.globals.gameState;
					console.log('in gamePulse: gamestate: '+gameState+' tick: '+gObj.globals.tick)
					switch (gameState){
						case 'init': 
							console.log('game is starting up...');
							break;
						case 'started': 
							gObj.choosePanel(null,'splash');
							gObj.globals.gameState= 'choosing a player';
							break;	
						case 'choosing a player': 
							console.log('choosing a player');

							
							//gObj.choosePanel(null,'arena');
							//gObj.globals.gameState = 'arenastart';
							break;
						case 'starting arena':

							console.log('starting out the arena');
							break;		
						case 'waiting':
							console.log('waiting...');
							break;	
					
					}
					gObj.globals.tick++;
				}	
				
				
			}
			yevt.on(window,'load',YAHOO.alw.smkf.init,YAHOO.alw.smkf, true);
			yevt.on('cpprev', 'click', YAHOO.alw.smkf.changePlayer, 'back');
			yevt.on('cpnext', 'click', YAHOO.alw.smkf.changePlayer, 'fwd');
			yevt.on('btnstart','click',YAHOO.alw.smkf.choosePanel,'choosechar');
			yevt.on('cpselect', 'click', YAHOO.alw.smkf.choosePlayer, YAHOO.alw.smkf, true);
		</script>
	</head>
	<body>
		<div id='game'>
			<div id='loading' class='panel shown'>
				<h1>LOADING...</h1>
			</div>
			<div id='splash' class='panel'>
				<img id='logo' src='../img/logo2.png'/>
				<div class='menubtn' id='btnstart'><a  href="javascript:void(0)">START</a></div>
				<div class='menubtn' id='btnhowto'><a  href="javascript:void(0)">HOW TO PLAY</a></div>
				<div class='menubtn' id='btncredits'><a  href="javascript:void(0)">CREDITS</a></div>
			</div>
			<div id='help' class='panel'>
				help
			</div>
			<div id='choosechar' class='panel'>
				<div id='cptitle'>
					<span>CHOOSE A CHARACTER</span>
				</div>
				<div id="charpreviewimg">
  					<img id='charpreviewimgsrc' src="../img/characters_trans.gif">
				</div>
				<div id="cpnav">
					<a href="javascript:void(0)" id='cpprev'>PREV</a>
					<a href="javascript:void(0)" id='cpselect'>SELECT</a>
					<a href="javascript:void(0)" id='cpnext'>NEXT</a>
				</div>
			</div>
			<div id='arena' class='panel'>
				<div id='playerleft'>
					<!--  
					<img id='plplayerimg' src="../img/antaeus_left.gif" class="playerimg"/>
					-->
					<div id="playerleftimg">
  						<img id='playerleftimgsrc' src="../img/characters_trans.gif">
					</div>
				</div>
				<div id='playerright'>
					<!--  
					<img id='prplayerimg' src="../img/cerebov.gif" class="playerimg"/>
					-->
					<div id="playerrightimg">
  						<img id='playerrightimgsrc' src="../img/characters_trans.gif">
					</div>
				</div>
				<br clear="both"/>
				<div id='playerstats'>
					<div id='leftplayerstats'>
						<div id='lpslife'>LIFE:<span>100</span></div>
						<div id='lpsscore'>SCORE:<span>0</span></div>
						<!--
						<div id='lpssword'>SWORD:<span>0</span></div>
						<div id='lpsmagic'>MAGIC:<span>0</span></div>
						<div id='lpskungfu'>KUNGFU:<span>0</span></div>
						<div id='lpswildcard'>WILDCARDS:<span>0</span></div>
						-->
					</div>
					<div id='rightplayerstats'>
						<div id='rpslife'>LIFE:<span>100</span></div>
						<div id='rpsscore'>SCORE:<span>0</span></div>
						<!--
            <div id='rpssword'>SWORD:<span>0</span></div>
						<div id='rpsmagic'>MAGIC:<span>0</span></div>
						<div id='rpskungfu'>KUNGFU:<span>0</span></div>
						<div id='rpswildcard'>WILDCARDS:<span>0</span></div>	
            -->			
					</div>
			</div>
		</div>
	</body>
</html>